import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import {CircularProgress, IconButton, Typography} from "@mui/material";

import RestartAltIcon from '@mui/icons-material/RestartAlt';

const ipcRenderer = window.ipcRenderer;
const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    display: 'flex',
};

export default function Loading(props) {
    let [open, setOpen] = React.useState(false);
    if(props.open !== open){
        setOpen(props.open)
    }
    const handleDie = () => {
        ipcRenderer.send('back');
    }
    return (
        <div>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                open={open}
                onClose=''
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500,
                }}
                disableEnforceFocus
            >
                <Fade in={open} >
                    <Box sx={style}>
                        <CircularProgress sx={{marginRight:5}} size={80}/>

                        <IconButton sx={{marginTop:10,marginLeft:-16}} onClick={handleDie} color='primary'>
                            <RestartAltIcon/>
                            <Typography variant="subtitle2" display="block"  gutterBottom>
                                取消刷新
                            </Typography>
                        </IconButton>
                    </Box>
                </Fade>
            </Modal>
        </div>
    );
}
